<!--
***挑选入门商品***
-->
<template>
  <div>
    <v-header v-if="!$root.ISAPP">
      <div class="nav-tab2">
        <h3>挑选商品</h3>
      </div>
    </v-header>
    <step :step='3'></step>
    <div class="register">
      <div class="list">
        <swiper :options="hpOption" style="padding: 0 10px 0 10px">
          <div class="item swiper-slide" v-for="(item, index) in productList" :class="{active: index===css.activeIndex}" @click="toggle(index)">
            <div class="img"><img :src="item.mainpic | https" :alt="item.imageurl"></div>
            <div class="price font-price">¥{{item.originalprice}}</div>
            <div class="brand">{{item.brandname}}</div>
          </div>
        </swiper>
      </div>
      <div class="product-tip"><img class="product-tip-img" src="../../../static/img/product-tip.png" alt=""> 本商品不支持退换货</div>
      <div class="detail">
        <div class="product_sw">
          <swiper :options="prodSwiOption" class="product_sw">
            <swiper-slide v-for="(item,index) in imgs" :key="index">
              <img :src="item | https" :alt="item">
            </swiper-slide>
            <div class="swiper-scrollbar" slot="scrollbar"></div>
          </swiper>
        </div>
        <div class="product_texture">
          <div class="title">{{productInfo.name}}</div>
          <div class="express">发货地：{{express.sendplace}} 运费：至全国¥{{express.expressfee}}元</div>
          <div class="product_logo  gaps" v-if="productInfo.brandlogo">
            <div class="logo_img">
              <img :src="productInfo.brandlogo|https" alt="" @click.stop='goSearch(productInfo.brandname,productInfo.brandid)'>
            </div>
            <p>{{productInfo.brandname}}</p>
            <p v-if='productInfo.brandmemo'>{{productInfo.brandmemo}}</p>
          </div>
          <section>
            <p>商品编号:<span>{{productInfo.prokey}}</span></p>
            <p>材质:<span>{{productInfo.texture}}</span></p>
            <p>颜色:<span>{{productInfo.colorattribute}}</span></p>
          </section>
          <section class="sizeList">
            <table>
              <tr class="sizeHead">
                <td>规格</td>
                <td v-for='(item,index) in sizeList.head' :key='index'>{{item}}</td>
              </tr>
              <tr v-for='(item,index) in sizeList.body' :key='index'>
                <td>{{item.key}}</td>
                <td v-for='(s,index) in item.val ' :key="index">{{s}}</td>
              </tr>
            </table>
          </section>
        </div>
        <div class="product_des" v-html='https(productInfo.description)'></div>
      </div>
    </div>
    <div class="btnBox">
      <a href="javascript:;" v-if="css.isJump" class="jump" @click="skipProduct">跳过此步骤</a>
      <a href="javascript:;" v-if="!css.isOrder" @click="itemsOpen">购买商品</a>
      <a href="javascript:;" v-if="css.isOrder" @click="pay">继续支付{{countDown}}</a>
    </div>
    <product-items :show="css.showItems" :isDistribution="true" :product-info="productInfo" :isGroupBuy="false" @close='itemsClose'></product-items>
    <mt-popup v-model="css.popup">
      <div class="popup">
        <div class="close" @click="close"></div>
        <div class="notW">
          <p class="text">抱歉~您的专属通道已过期 已经为您切回普通买手通道～</p>
          <p class="tips">如有疑问请在”斗牛”APP,联系客服小姐姐哦~ </p>
        </div>
      </div>
    </mt-popup>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import step from './Step'
import ProductItems from '../../common/templates/mall/ProductItems'
import { NewDetail, DetailExpress } from '../../common/api/product'
import { GetEntryProducts, SendMark, jumpProduct, orderInfo } from '../../common/api/distribution'
import { getUrlParam, DateDiff } from '@/common/util'
export default {
  data() {
    return {
      hpOption: {
        slidesPerView: 3.5,
        spaceBetween: 8,
        resistanceRatio: 0,
        freeMode: true
      },
      prodSwiOption: {
        autoplayDisableOnInteraction: false,
        pagination: '.swiper-pagination',
        roundLengths: true,
        preloadImages: true,
        updateOnImagesReady: true,
        scrollbar: '.swiper-scrollbar',
        scrollbarHide: false
      },
      css: {
        activeIndex: 0,
        showItems: false,
        isJump: 0,
        isOrder: false,
        popup: false
      },
      productList: [],
      productInfo: {},
      imgs: [],
      sizeList: {},
      express: {},
      expiredtime: '2018-06-29 20:16:17 +8',
      countDown: null
    }
  },
  components: { step, ProductItems },
  computed: {
    ...mapGetters({
      user: 'userInfo',
      insq: 'insq'
    })
  },
  created() {
    if (this.$root.ISAPP) {
      let param = getUrlParam('param')
      if (param) {
        this.$store.dispatch('setUserInfo', JSON.parse(decodeURIComponent(param)))
      }
      window.document.title = '挑选商品'
    } else {
      if (!JSON.parse(window.localStorage.getItem('currentUser') || '{}').token) {
        this.$router.push(`/login`)
      }
    }
    this.getProducts()
    SendMark({ mark: 1 })
      .catch(e => {
        console.error(e)
      })
  },
  methods: {
    toggle(index) {
      if (index === this.css.activeIndex) return
      this.css.activeIndex = index
      this.getDetail(this.productList[index].productid)
    },
    itemsClose(item) {
      this.css.showItems = false
      if (item) {
        this.buyNow(item)
      }
    },
    itemsOpen() {
      this.css.showItems = true
    },
    close() {
      this.css.popup = false
    },
    getDetail(id) {
      NewDetail(id)
        .then(res => {
          this.productInfo = res.info
          this.productInfo.productid = res.info.id
          this.imgs = (res.info.mainpic || '').split('|')
          this.sizeList = JSON.parse(res.info.sizedesc || '{}')
          this.getExpress(res.info.expresstemplateid)
        })
        .catch(e => {
          console.error(e)
        })
    },
    getProducts() {
      let opt = {}
      if (this.$route.params.parentid) {
        opt.parentid = this.$route.params.parentid
      }
      GetEntryProducts(opt)
        .then(res => {
          orderInfo()
            .then(order => {
              if (order) {
                this.countdownTime(order.expiredtime)
                this.css.isOrder = true
                this.currentOrderno = order.orderInfo.orderno
                let detailitem = JSON.parse(order.orderInfo.detailitem)
                res.products = res.products.filter(item=>{
                  return detailitem[0].productid === item.productid
                })
              }
              this.productList = res.products
              if(this.productList[0]) {
                this.getDetail(this.productList[0].productid)
              }
          })
          .catch(e => {
            if(res.products[0]) {
            this.getDetail(res.products[0].productid)
            }
            this.productList = res.products
            console.error(e)
          })
          this.css.isJump = res.isjump
          if (res.hasOwnProperty('isoutdate')) {
            this.css.popup = true
          }
        })
        .catch(e => {
          console.error(e)
        })
    },
    buyNow(item) {
      item.salemoney = item.saleprice
      item.saleprice = item.price
      item.specialprice = item.price
      item.isDistribution = true
      item.checked = true
      item.isok = true
      item.prostatus = 1
      if (this.$route.params.parentid) {
        item.parentid = this.$route.params.parentid
      }

      let tempTotalPrice = item.count * item.price
      let pay = {
        ...item,
        id: item.productid,
        allPay: tempTotalPrice,
        item: [item]
      }

      let _ = this
      _.$store.dispatch('setOrderCoupon', {
        canUseCoupon: [],
        unCanUseCoupon: []
      })
      _.$store.state.order.selectedCoupon = {}
      _.$store.dispatch('setOrderOut', { ...pay })
      _.$store.dispatch('setFromeType', 1)
      _.$router.push('/order/checkout')
    },
    getExpress(id) {
      DetailExpress(id)
        .then(res => {
          if (res) this.express = res
        })
        .catch(e => {
          console.error('物流信息加载失败', e)
        })
    },
    skipProduct() {
      let opt = {}
      if (this.$route.params.parentid) {
        opt.parentid = this.$route.params.parentid
      }
      jumpProduct(opt)
        .then(res => {
          this.$router.replace('/distribution/success')
        })
        .catch(e => {
          if (e.code === 1511630) {
            this.toast('您已经是分销商了~')
            this.$router.replace('/distribution')
          } else {
            this.toast(e.msg)
          }
        })
    },
    countdownTime(time) {
      var ts = DateDiff({ destination: time, type: 'm' })
      if (ts.m <= 0 && ts.s <= 0) this.countDown = ''
      this.countDown = '(剩余' + ts.m + '分' + ts.s + '秒)'
      if (ts.m === 0 && ts.s === 1) {
        this.countDown = null
        this.css.isOrder = false
        clearTimeout(this.timeRun)
      } else {
        this.timeRun = setTimeout(() => {
          this.countdownTime(time)
        }, 1000)
      }
    },
    pay() {
      if (this.$root.ISAPP) {
        let opt = {
          name: "callAppPaymentPage",
          params: {
            orderid: this.currentOrderno,
            callbackSuccessUrl:
              document.location.protocol +
              "//" +
              document.location.host +
              "/distribution/success",
            callbackFailUrl:
              document.location.protocol +
              "//" +
              document.location.host +
              "/distribution/product"
          }
        };
        this.javascriptBridge(opt);
      } else {
        let url = "/pay/" + this.currentOrderno;
        if (this.insq) url = `/frame/${encodeURIComponent(url)}`;
        this.$router.push(url);
      }
    }
  },
  beforeDestroy() {
    if (this.timeRun) clearTimeout(this.timeRun)
  }
}
</script>
<style lang='scss' scoped>
  .register{
    padding-bottom: 12vw;
    .list{
      padding-top: 2vw;
      .item{
        width: 25vw;
        text-align: left;
        &.active{
          .img{
            border-color: #F0C61F;
          }
          &::after{
            width: 16px;
            height: 16px;
            content: '';
            background: url(/static/img/d_proselect.png);
            background-size: 16px 16px;
            position: absolute;
            z-index: 9;
            top: 1vw;
            right: 1vw;
          }
        }
        .img{
          width: 25vw;
          height: 25vw;
          border: 1px solid #fff;
          margin-bottom: 3vw;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .price{
          font-size: 14px;
          margin-bottom: 1vw;
          del{
            font-size: 12px;
            color: #999;
          }
        }
        .brand{
          font-size: 12px;
        }
      }
    }
    .product-tip{
      padding: 2vw 2vw 0;
      color: red;
      font-size: 12px;
      .product-tip-img{
        width: 15px;
        height: 15px;
        float:left;
        margin-right: 5px;
        margin-top:1px;
      }
    }
    .detail{
      padding-top: 2vw;
      // padding-top: 10vw;
      .product_sw {
        max-width: 600px;
        max-height: 600px;
        height: 100vw;
        margin: 0 auto;
        background-color: #fff;
        position: relative;
      }
      .product_texture .title{
        border-bottom: 1px solid #eee;
        padding: 3vw 4vw 3vw;
      }
      .product_texture .express{
        font-size: 12px;
        color: #999;
        padding: 2vw 4vw 0;
      }
      .product_texture section:nth-of-type(1) {
        padding: 20px 20px;
        font-size: 0.875rem;
        text-align: center;
      }
      .product_texture section:nth-of-type(1) p {
        line-height: 26px;
        color: #000;
      }
      .product_texture section:nth-of-type(1) span {
        color: #666;
        margin-left: 5px;
      }
      .sizeList {
        padding: 0px 10px 18px 10px;
      }
      .sizeList table {
        width: 100%;
        border-collapse: collapse;
      }
      .sizeList table td {
        border: 1px solid #f2f2f2;
        text-align: center;
        color: #666;
        font-size: 0.75rem;
        width: 10%;
      }
      .sizeList table tr {
        height: 24px;
      }
      .sizeHead {
        background: #f2f2f2;
      }
      .product_des {
        text-align: center;
        padding: 10px;
      }
    }
    .product_logo {
      text-align: center;
      padding-top: 15px;
    }
    .product_logo .logo_img {
      height: 50px;
      width: 50px;
      border-radius: 50%;
      border: 1px solid #eee;
      overflow: hidden;
      margin: 6px auto;
    }
    .logo_img img {
      width: 100%;
      min-height: 100%;
    }
    .product_logo p:nth-of-type(1) {
      padding-bottom: 10px;
      font-weight: bold;
    }
    .product_logo p:nth-of-type(2) {
      padding: 5px 10% 20px 10%;
      font-size: 0.75rem;
    }
  }
  .btnBox{
    position: fixed;
    width: 100%;
    height: 12vw;
    bottom: 0;
    left: 0;
    z-index: 9;
    text-align: center;
    line-height: 12vw;
    display: flex;
    justify-content: center;
    a{
      background: #333;
      font-size: 16px;
      color: #fff;
      flex-grow: 1;
      &.jump{
        background: #999;
      }
    }
  }
.mint-popup{
  background: none;
}
.popup{
  width: 88vw;
  height: 62vw;
  border-radius: 8px;
  background: url(/static/img/d_popup.png) right bottom #fff;
  background-size: 335px 233px;
  position: relative;
  display: flex;
  .notW{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20vw 5.33vw 0;
    .text{
      font-size: 14px;
    }
    .tips{
      font-size: 12px;
      color: #999;
      line-height: 20vw;
      border-top: 1px dashed #ccc;
    }
  }
  .close{
    width: 7vw;
    height: 7vw;
    position: absolute;
    right: 3vw;
    top: 3vw;
    z-index: 10;
    &::before{
      content: '';
      width: 100%;
      height: 1px;
      background: #333;
      position: absolute;
      transform-origin: 50% 0;
      transform: rotate(45deg);
      position: absolute;
      top: 3vw;
    }
    &::after{
      content: '';
      width: 100%;
      height: 1px;
      background: #333;
      position: absolute;
      transform-origin: 50% 0;
      transform: rotate(-45deg);
      position: absolute;
      top: 3vw;
    }
  }
}
@media only screen and (device-width:375px) and (device-height:812px) {
  .btnBox {
    border-bottom: 34px solid #fff !important;
    box-sizing: content-box;
  }
}
</style>



